import "./index.scss"
import React, { Component } from 'react';
import {Button,Row,Col,Image,Carousel} from "antd"
import { ajax } from '../../api';
import * as echarts from 'echarts';
import userlist from "../../mobx/userlist";
import moment from "moment"
import { sexList } from "../../utils";



class Lister extends Component {
      
    componentDidMount(){

        ajax.getuserlist().then(res=>{
            
            var Role = []
            res.result.map((item)=>{
                Role.push(item.role ) 
                })
                var a = Role.filter(item=>item=="0").length
                var b = Role.filter(item=>item=="1").length
                var c = Role.filter(item=>item=="2").length
                this.chartInit1(a,b,c)           
        })

        ajax.getuserlist().then(res=>{       
            var Sex = []
            res.result.map((item)=>{
                Sex.push(item.sex ) 
                })
                var d = Sex.filter(item=>item=="0").length
                var e = Sex.filter(item=>item=="1").length
                var f = Sex.filter(item=>item=="2").length
                this.chartInit(d,e,f)         
        })     
        
    }   

    chartInit1=(a,b,c)=>{
        var myChart = echarts.init(document.getElementById('mainchart1'));

        var option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: '人员比例',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '40',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    {value: a, name: '普通员工'},
                    {value: b, name: '前台'},
                    {value: c, name: '老板'},
                ]
            }
        ]
    }
        myChart.setOption(option);

    }

    chartInit=(d,e,f)=>{
        var myChart = echarts.init(document.getElementById('mainchart'));

        // var option = {
        //     title: {
        //         text: '男女占比',
        //         subtext: '男女比例',
        //         left: 'center'
        //     },
        //     tooltip: {
        //         trigger: 'item'
        //     },
        //     legend: {
        //         orient: 'vertical',
        //         left: 'left',
        //     },
        //     series: [
        //         {
        //             name: '访问来源',
        //             type: 'pie',
        //             radius: '50%',
        //             data: [
        //                 {value: d, name: '保密'},
        //                 {value: e, name: '女'},
        //                 {value: f, name: '男'},
        //             ],
        //             emphasis: {
        //                 itemStyle: {
        //                     shadowBlur: 10,
        //                     shadowOffsetX: 0,
        //                     shadowColor: 'rgba(0, 0, 0, 0.5)'
        //                 }
        //             }
        //         }
        //     ]
        // };
        // // 使用刚指定的配置项和数据显示图表。

        var option = {
            xAxis: {
                type: 'category',
                data: ['保密', '男', '女']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [
                    {value: d, name: '保密'},
                    {value: e, name: '女'},
                    {value: f, name: '男'},
                ],
                type: 'bar'
            }]
        };

        myChart.setOption(option);

    }

    gotogongzo=(item)=>{
        this.props.history.push("/main/anno/gong/?aid="+item._id)
    }

    render() {
      
        return (
            <div>
               <h2 style={{textAlign:"center",fontSize:30,color:"red",fontWeight:600}}>人员分析表</h2>
            <div style={{width:'100%',padding:"0 30px"}}>
                <Row>
                    <Col span={11} style={{marginTop:60}} >
                    <div style={{border:"1px solid #e7eaec"}}>
                        
                            <div style={{height:500,padding:20}} id="mainchart1" ></div>
                                         
                        </div>
                    </Col>

                    <Col style={{marginTop:60}} span={11}  offset={2} >
                    <div style={{border:"1px solid #e7eaec"}}>
                           
                            <div style={{height:500,padding:20}} id="mainchart" ></div>      
                        </div>
                    </Col>
                   
                </Row>
            </div>
            </div>
        );
    }
}

export default Lister;